<template lang="html">
  <div class="circle-container">
    <div class="circle-item" v-for="(item,index) in circleData" :key="index">
      <div class="circle-title">
        <div class="circle-icon">
          <img :src="item.icon" alt="">
        </div>
        <div class="circle-info">
          <div class="circle-user">
            <p class="circle-username">{{ item.username }}</p>
            <p class="circle-city">{{ item.city }}</p>
          </div>
          <div class="circle-time">
            {{ item.times }}
          </div>
        </div>
      </div>
      <div class="circle-pic">
        <img :src="item.pic" alt="">
      </div>
      <p class="circle-content">{{ item.content }}</p>
      <div class="circle-footer">
        <div class="circle-dianzan">
          <i class="iconfont icon-shixintaoxin"></i>
          {{ item.dianzan }}
        </div>
        <div class="circle-pinglun">
          <i class="iconfont icon-pinglun"></i>
          {{ item.pinglun }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'SportsCircle',
  data () {
    return {
      circleData:[]
    }
  },
  mounted() {
    this.$axios.get(this.HOST + '/burning/dongtai')
    .then(res => {
      this.circleData = res.data
    })
    .catch(error => {
      console.log(error)
    })
  }
}
</script>

<style lang="less" scoped>
.circle-container{
  .circle-item{
    margin-top: 15px;
    box-sizing: border-box;
    width: 100%;
    font-size:14px;
    padding: 0 10px;
    .circle-title{
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
      div{
        float: left;
      }
      .circle-icon{
        margin-right: 15px;
        img{
          width: 40px;
          height: 40px;
        }
      }
      .circle-info{
        width: (355-55)/50rem;
        .circle-city{
          font-size: 12px;
          height:20px;
          line-height: 20px;
          color:#666;
        }
        .circle-time{
          float: right;
          height: 40px;
          line-height: 40px;
        }
      }
    }
    .circle-pic{
      height:200px;
      margin-bottom: 10px;
      img{
        height: 100%;
        width: 100%;
      }
    }
    .circle-content{
      color: #666;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    .circle-footer{
      display:flex;
      text-align: center;
      div{
        flex-grow: 1;
      }
      .circle-dianzan{
        border-right: 1px solid #eee;
        i{
          color: red;
        }
      }
    }
  }
  .circle-item:last-child{
    margin-bottom:60px;
  }
}
</style>
